<template>
  <div id="body">
    <div class="title">
      <span>{{ washName }}</span>
    </div>
    <div class="from">
      <a-form layout="inline" :model="formState" >
        <a-form-item label="编码">
          <a-input v-model:value="formState.code" placeholder="请输入编码" />
        </a-form-item>
        <a-form-item label="船舶识别号">
          <a-input v-model:value="formState.shipId" placeholder="请输入船舶识别号" />
        </a-form-item>
        <a-form-item label="船舶名称">
          <a-input v-model:value="formState.shipName" placeholder="请输入船舶名称" />
        </a-form-item>
        <a-form-item label="洗舱状态">
          <a-select v-model:value="formState.subscribeStatus" show-search placeholder="请输入选择预约状态" style="width: 200px"
            :options="options"  @focus="handleFocus" @blur="handleBlur"
            @change="handleChange"></a-select>
        </a-form-item>
        <a-form-item label="预约洗舱时间">
          <a-config-provider :locale="zhCN">
          <a-range-picker v-model:value="subscribeTime" show-time
           format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          style="width: 260px;"
          @change="subscribeTimeChange" 
         />
        </a-config-provider>
        </a-form-item>
        <a-form-item label="洗舱中时间">
          <a-config-provider :locale="zhCN">
          <a-range-picker v-model:value="startTime" show-time
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          style="width: 260px;"
          @change="startTimeChange" />
        </a-config-provider>
        </a-form-item>
        <a-form-item label="洗舱完成时间">
          <a-config-provider :locale="zhCN">
          <a-range-picker v-model:value="endTime" show-time
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          style="width: 260px;"
          @change="endTimeChange"  />
        </a-config-provider>
        </a-form-item>
        <a-form-item>
          <a-button style="margin-right: 10px;" @click="rest">重置</a-button>
          <a-button type="primary"  @click="getListPage" >查询</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="table">
      <a-config-provider :locale="zhCN">
      <a-table :columns="columns" :data-source="data" :scroll="{ y: 532 }" :pagination="pagination"
        @change="pagination.change" :loading="loading">
        <template #bodyCell="{ column, text }">

          <template v-if="column.dataIndex === 'subscribeStatus'">
            <a>{{ text=='1'?'同意':text=='3'?'撤销':text=='4'?'洗舱中':'洗舱结束' }}</a>
          </template>
          <template v-if="column.dataIndex === 'subscribeTime'">
            <span>{{ text==null?'----':text}}</span>
          </template>
          <template v-if="column.dataIndex === 'startTime'">
            <span>{{ text==null?'----':text}}</span>
          </template>
          <template v-if="column.dataIndex === 'endTime'">
            <span>{{ text==null?'----':text}}</span>
          </template>
        </template>
      </a-table>
    </a-config-provider>
    </div>
  </div>
</template>
<script setup>
import zhCN from "ant-design-vue/es/locale/zh_CN"

import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
import 'dayjs/locale/zh-cn'
import {
  ref,
  reactive,
  defineEmits,
  onMounted,
  onBeforeMount,
  defineProps,
  computed,
} from "vue";
import { getList } from "@/api/wash";
const table = {
  pageNum: 1,
  pageSize: 10
}
const formState = ref({
  pageSize:10,
  pageNum:1,
  subscribeStatus:''
})
const washName=ref('')
const washingStationCode=ref('')
onMounted(()=>{
  const hash = window.location.hash;

// 检查哈希部分是否包含查询字符串
if (hash) {
    // 获取哈希部分中的查询字符串部分，去掉 '#/' 部分
    const queryString = hash.split('?')[1];

    if (queryString) {
        // 使用 URLSearchParams 解析查询字符串
        const urlParams = new URLSearchParams(queryString);
        
        // 获取 id 和 name 参数的值
        washingStationCode.value = urlParams.get('id');
        washName.value = urlParams.get('name');
    } else {
        console.log('没有查询字符串');
    }
} else {
    console.log('URL 中没有哈希部分');
}
    //  console.log(washingStationCode.value,washName.value,'携带参数washingstationCode-')
  getListPage()
})

const options=ref([
{
      value: '',
      label: '全部',
    },{
      value: '1',
      label: '预约洗舱',
    }, {
      value: '4',
      label: '洗舱中',
    }, {
      value: '5',
      label: '洗舱完成',
    }]);
const loading = ref(true)
const pagination = reactive({
  current: table.pageNum,
  defaultPageSize: 10,
  showTotal: (total, range) => `共${total}条`,
  onShowSizeChange: (current, pageSize) => { table.pageSize = pageSize; table.pageNum = 1 },
  onChange: (pageNum) => {

    pagination.current = pageNum

    getListPage()
  }

})
const columns = [
{ title: "编码", key: "code",dataIndex: "code", align: "center", width: 170, ellipsis: true, },

  { title: "船舶名称", key: "shipName",dataIndex: "shipName", align: "center", width: 180, ellipsis: true, },
  { title: "船舶识别号", key: "shipId", dataIndex: "shipId",align: "center", width: 140, ellipsis: true, },
  { title: "预约洗舱时间", key: "subscribeTime",dataIndex: "subscribeTime", align: "center", width: 160, ellipsis: true, },
  { title: "洗舱中时间", key: "startTime",dataIndex: "startTime", align: "center", width: 160, ellipsis: true, },
  { title: "洗舱完成时间", key: "endTime", dataIndex: "endTime",align: "center", width: 160, ellipsis: true, },
  { title: "洗舱状态", key: "subscribeStatus",dataIndex: "subscribeStatus", align: "center", width: 100,  ellipsis: true, },

];
const data = ref([])
const handleFocus=()=>{
  console.log('handleFocus')
}
const handleBlur=()=>{
  console.log('handleBlur')
}
const handleChange=()=>{

}
const getListPage=async()=>{
  loading.value=true
  formState.value.pageSize=10
  formState.value.pageNum=pagination.current
  formState.value.washingStationCode=washingStationCode.value
  console.log({...formState.value})
  let res=await getList({...formState.value})
  if(res.code==200){
    loading.value=false
  }
  // res.data.list.forEach(item => {
  //   if(item.subscribeStatus=='1'){

  //   }
  // });
  data.value=res.data.data.list
  pagination.total=res.data.data.total
  console.log(res,'res')
}
const subscribeTime=ref()
const endTime=ref()
const startTime=ref()
// 预约洗舱时间
const subscribeTimeChange = (value, dateString) => {
  Object.assign(formState.value, { subscribeTimeStart: dateString[0] });
  Object.assign(formState.value, { subscribeTimeEnd: dateString[1] });
};
// 洗舱中时间
const startTimeChange = (value, dateString) => {
  Object.assign(formState.value, { startTimeStart: dateString[0] });
  Object.assign(formState.value, { startTimeEnd: dateString[1] });
};
// 洗舱完成时间
const endTimeChange = (value, dateString) => {
  Object.assign(formState.value, { endTimeStart: dateString[0] });
  Object.assign(formState.value, { endTimeEnd: dateString[1] });
};
const rest=()=>{
  formState.value={}
  subscribeTime.value=[]
  getListPage()
}
</script>
<style lang="scss" scoped>
#body {
  // padding: 10px;
  width: 100%;
  max-height: 95%;
  // background-color: lightpink;
}

::v-deep .ant-table-body {
  &::-webkit-scrollbar {
    height: 10px;
    width: 10px;
    overflow-y: scroll;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #939392;
  }

  &::-webkit-scrollbar-track {
    -webkit-box-shadow: 0;
    border-radius: 0;
    background: #f0f2f5;
  }
}

.title {

  margin-top: 5px;

  >span {
    font-weight: 800;
    color: rgba(0, 0, 0, 0.88);
  }
}

.from {
  margin: 20px;

}

.table {
  width: 98%;
  padding: 10px;
}

::v-deep .ant-form-item {
  margin-bottom: 10px !important;
}
</style>